<template>
    <div class="map-container">
        <router-link to="/start"> <img src="@/static/leftbtn.jpg" class="return" alt=""></router-link>
        <img ref="mapimg" src="@/static/map1.jpg" alt="" class="map">
        <img :src="item" alt="" :class="proccessstyle[index]" @click="entersmallcontroller(index)"
            v-for="(item, index) in imgs">

    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import api from '@/api/user'
import { useAuthStore } from '../../store';
const store=useAuthStore();
const mapimg = ref();
const router = useRouter();
const proccessstyle = ref(["proccess1", "proccess2", "proccess3", "proccess4", "proccess5"]);
const imgs = ref([new URL("../../static/process1.jpg", import.meta.url).href, new URL("../../static/process2.jpg", import.meta.url).href, new URL("../../static/process3.jpg", import.meta.url).href, new URL("../../static/process4.jpg", import.meta.url).href, new URL("../../static/process5.jpg", import.meta.url).href])
const entersmallcontroller = (index) => {

if(index==4){
    router.push({
        path: "/detail5",
        query: {
            number: index
        }
    }) 
}else{
   router.push({
        name: "smallcontroller",
        query: {
            number: index
        }
    })
}

 


}
onMounted(() => {
    store.settopics([]);
    store.resetnowtopic();
    store.setcorrectnum(0);
    api.getprocess()
        .then((res) => {
            console.log(res);
            console.log(Math.ceil(res.data.beginNUm / 23));
            mapimg.value.src = new URL(`../../static/map${Math.ceil(res.data.beginNUm / 23)}.jpg`, import.meta.url).href ;
            for (let i in proccessstyle.value) {

                if (i == Math.ceil(res.data.beginNUm / 23) - 1) {
                    proccessstyle.value[Math.ceil(res.data.beginNUm / 23) - 1] = `proccess${Math.ceil(res.data.beginNUm / 23)} amim`
                } else if (i < Math.ceil(res.data.beginNUm / 23) - 1) {

                    proccessstyle.value[i] = `proccess${Number(i)+1} show`

                }

            }
       
        })
})
function geturl(url) {
    return new URL(url, import.meta.url).href
}
</script>
<style lang="scss" scoped>
.map-container {
    position: relative;
    width: 100%;
    height: 100%;
    // background-image: url("@/static/map.jpg");
    background-size: 100% 100%;
    /* 确保背景图片覆盖整个区域 */
    background-position: center;
    overflow: hidden;

    /* 背景图片居中 */
    .return {
        position: absolute;
        left: 3rem;
        top: 3rem;
        height: 4rem;
        z-index: 3;

    }
    .map {
        display: block;
        width: 100%;
        height: 100%;
    }

    .amim {
        animation: scale 2s infinite alternate;
        display: block !important;
    }

    .show {
        display: block !important;
    }

    .proccess1 {
        position: absolute;
        bottom: 10%;
        left: 0rem;
        // height: 24rem;
        width: 40%;
        display: none;
    }


    /* 背景图片居中 */
    .proccess2 {
        position: absolute;
        bottom: 0rem;
        right: 0rem;
        // height: 24rem;
        width: 30%;
        display: none;
    }

    .proccess3 {
        position: absolute;
        bottom: 30%;
        right: 35%;
        // transform: translate(100%,50%);
        // height: 24rem;
        width: 25%;
        display: none;
    }

    .proccess4 {
        position: absolute;
        top: 0%;
        left: 0%;
        // transform: translate(100%,50%);
        // height: 24rem;
        width: 40%;
        display: none;
    }

    .proccess5 {
        position: absolute;
        top: 0%;
        right: 0%;
        // transform: translate(100%,50%);
        // height: 24rem;
        width: 25%;
        display: none;
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.2);
    }
}
</style>